<template>
  <div>
    <!-- <template #headerTitle>
      <Icon :icon="getTitle.icon" class="m-1 pr-1" />
      <span> {{ getTitle.value }} </span>
    </template> -->
    <div style="background: #fff; height: 100vh; overflow: scroll">
      <div style="display: flex; justify-content: center; margin-bottom: 10px">
        <div class="container">
          <div v-if="!flag" style="display: flex; align-items: center; height: 100%;flex-direction: column;justify-content: center;">
            <img style="width: 100%; margin:20px 0" src="../../../assets/images/logo.png" />
            <img style="width: 100%" src="../../../assets/images/nullShop.png" />
          </div>
          <div v-if="flag">
            <!-- <div style="text-align: center;margin-bottom: 10px;">产品验真</div> -->
            <el-carousel height="300px" style="background: #fff; border-radius: 5px">
              <!-- <el-carousel-item v-for="(item, index) in props.data.data" :key="index">
                  <img :src="item.url">
              </el-carousel-item> -->
              <el-carousel-item v-for="(item, index) in picLunboList" :key="item.id">
                <img style="width: 100%" :src="urlPrefix + item.picUrl" />
              </el-carousel-item>
              <!-- <el-carousel-item>
                <img style="width: 100%" src="../../../assets/images/mp.png" />
              </el-carousel-item>
              <el-carousel-item>
                <img style="width: 100%" src="../../../assets/images/logo.png" />
              </el-carousel-item> -->
            </el-carousel>
            <div style="background: #fff; padding: 10px; margin-top: 10px">
              <div style="font-weight: bold; font-size: 16px; margin-bottom: 10px"
                >产品基本信息
              </div>
              <p>
                <span style="display: inline-block; width: 90px; color: #aaa">产品名称：</span>
                {{ basInvForm.cinvname || '' }}
              </p>
              <p
                ><span style="display: inline-block; width: 90px; color: #aaa">规格型号：</span
                >
                {{ basInvForm.cinvstd || '' }}
              </p>
              <!-- <p
                ><span style="display: inline-block; width: 90px; color: #aaa">生产日期：</span
                >{{ basInvForm.scDate || '' }}
              </p>
              <p
                ><span style="display: inline-block; width: 90px; color: #aaa">批次：</span
                >{{ basInvForm.beach || '' }}
              </p> -->
            </div>
            <div style="margin-top: 10px; border-radius: 5px">
              <!-- <img style="width: 100%;" src="../../../assets/images/header.jpg" > -->
              <!-- <img style="width: 100%" src="../../../assets/images/mp.png" /> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="AccountModPwd">
  import { ref, onMounted } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useUserStore } from '/@/store/modules/user';
  import { useRouter } from 'vue-router';
  import { router } from '/@/router';
  import { shopInvForm } from '/@/api/shop/shop';
  import { useGlobSetting } from '/@/hooks/setting';
  import { basBarMbasBarGetConfig } from '/@/api/barcode/basBarM';
  const { urlPrefix } = useGlobSetting();
  console.log('router.currentRoute.value.name==', router.currentRoute.value.params.snCode, urlPrefix);

  const sn = router.currentRoute.value.params.sn;
  const invCode = router.currentRoute.value.params.invCode;

  const picLunboList = ref<any[]>([]);
  const basInvForm = ref<any>({});
  let flag = ref(false);

  onMounted(async () => {
    await basBarMbasBarGetConfig({ sn, invCode }).then((res) => {
      if(res.result == 'true'){
        picLunboList.value = res.data.picLunboList;
        basInvForm.value = res.data.basInv;
        basInvForm.value = {
          ...basInvForm.value,
          beach: res.data.otherData.beach,
          scDate: res.data.otherData.scDate,
        };
        flag.value = true;
      }else{
        flag.value = false;
      }
    });
  });

  const userStore = useUserStore();
  const { t } = useI18n();
  const { showMessage, createSuccessModal } = useMessage();
  const getTitle = {
    icon: 'i-simple-line-icons:basket-loaded',
    value: '产品验真',
  };
  
  const { currentRoute } = useRouter();
  console.log(currentRoute.value.query.sn);
</script>
<style>
  /* 默认样式 */
  .container {
    width: 400px;
    border-radius: 5px;
    background: #eee;
    padding: 10px;
    min-height: 700px;
  }

  /* 在小屏幕上调整样式 */
  @media (max-width: 768px) {
    .container {
      width: 100%;
      padding: 10px;
      background: #eee;
    }
  }
</style>
